<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <!-- 搜索筛选 -->
            <el-card v-if="!titleCurrentPanel" style="display:flex;justify-content: space-between">
                <el-row class="user-search" :gutter="10">
                    <el-col>
                        <el-input size="small" v-model="groupName" placeholder="群聊名称"
                                  style="width: 150px;"></el-input>
                        <el-input size="small" v-model="lordName" placeholder="群主姓名"
                                  style="width: 150px;"></el-input>
                        <el-date-picker
                            v-model="searchTime"
                            size="small"
                            type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['8:00:00']" style="width: 240px;">
                        </el-date-picker>
                        <el-button size="small" type="primary" @click="searchDataHandle(1,10)">查询</el-button>
                        <el-button size="small" type="primary" @click="reset">重置</el-button>
                    </el-col>
                </el-row>
            </el-card>
            <el-card v-if="titleCurrentPanel" style="display:flex;justify-content: space-between">
                <el-row style="width: 800px;">
                    <el-col :span="5">
                        <el-button plain size="small"
                                   @click="multipleSelection.length > 0 ? updateTagsVisible = true : $message.error('未选择客户');$refs.setClientsTags.resetData()">
                            批量打标签
                        </el-button>
                    </el-col>
                    <el-col :span="5">
                        <el-button size="small" @click="createHandler('group_event')">设置群事件</el-button>
                    </el-col>
<!--                    <el-col :span="5">-->
<!--                        <el-button size="small" @click="checkOut()">导出</el-button>-->
<!--                    </el-col>-->
                </el-row>
            </el-card>
            <div class="interspaceH"></div>
            <!--列表-->
            <el-card>
                <el-table size="small" @selection-change="tableRowChange" :data="listData" highlight-current-row
                          v-loading="loading" border
                          element-loading-text="拼命加载中" style="width: 100%;">
                    <el-table-column align="center" type="selection" width="60"></el-table-column>
                    <el-table-column sortable prop="clientGroupName" label="群名称" width="200"></el-table-column>
                    <el-table-column sortable prop="empName" label="群主" width="200"></el-table-column>
                    <el-table-column sortable prop="memberNum" label="群人数" width="200"></el-table-column>
                    <el-table-column sortable prop="joinGroupToday" label="今日入群" width="200"></el-table-column>
                    <el-table-column sortable prop="quitGroupToday" label="今日退群" width="200"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="250"></el-table-column>
                    <el-table-column align="center" label="操作" min-width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="currentHandler('detail', scope.row)" type="text">详情
                            </el-button>
                            <el-button size="mini" @click="currentHandler('clientList', scope.row)" type="text">更多
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                               :current-page="pagePagination.currentPage"
                               :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="pagePagination.total">
                </el-pagination>
            </el-card>
            <el-dialog :visible.sync="updateTagsVisible" width="40%" @close="closePage">
                <div style="margin: 10px 0">
                    <div style="margin: 10px 0">客户群管理：</div>
                    <!-- 列表 -->
                    <UpdateClientsTags ref="setClientsTags" :clientNum="multipleSelection.length"/>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="updateClientTags()">确定</el-button>
                        <el-button @click="closePage">返回</el-button>
                    </span>
                </div>
            </el-dialog>
        </div>
        <!-- 批量打标签 -->
        <!--        <div v-if="currentPanel == 'add_tag'">-->
        <!--            <AddTag @currentHandler="createHandler" :rowData="multipleSelection"></AddTag>-->
        <!--        </div>-->

        <!-- 群事件  新建群事件 -->
        <div v-if="currentPanel == 'group_event'">
            <GroupEvent @currentHandler="createHandler"></GroupEvent>
        </div>

        <!-- 详情页面-->
        <div v-if="currentPanel == 'detail'">
            <ManageDetail @currentHandler="currentHandler" :rowData="data"></ManageDetail>
        </div>
        <!-- 更多 -->
        <div v-if="currentPanel == 'clientList'">
            <clientList @currentHandler="currentHandler" :rowId="data.clientGroupId"></clientList>
        </div>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination'
    import ManageDetail from '@/views/custGroup/manage/detail'
    import clientList from '@/views/custGroup/manage/clientList'
    import GroupEvent from '@/views/custGroup/manage/group_event'
    import AddTag from '@/views/custGroup/manage/add_tag'
    import UpdateClientsTags from "@/views/custGroup/manage/client_update_tags"

    import ElementUI from 'element-ui'
    // 修改 el-dialog 默认点击遮照为不关闭
    ElementUI.Dialog.props.closeOnClickModal.default = false;

    export default {
        data() {
            return {
                data: {
                    clientGroupId: '',
                    clientGroupName: '',
                    empId: '',
                    groupTag: '',
                    peopleNum: 0,
                    createTime: ''
                },
                groupName: '',
                lordName: '',
                searchTime: ['', ''],
                titleCurrentPanel: false,
                listData: [],
                value1: '',
                loading: false, // true显示加载
                tagTitle: '批量打标签',
                tagFormVisible: false, // 批量打标签页显示与隐藏
                tagFormInline: {
                    items: [{
                        lordName: ""
                    }]
                },
                pageparm: {},
                eventTitle: '新建事件',
                eventFormVisible: false, // 事件页显示与隐藏
                eventForm: {},
                //添加事件
                saveForm: {},
                // 用户数据

                clientTagGroup: false,
                currentPanel: 'list',
                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
                //字段转换
                fieldType: {
                    createTime: "datetime",
                    customerLeadsSex: "array"
                },

                // 筛选
                formInline: {
                    page: 1,
                    limit: 10,
                    varLable: '',
                    varName: '',
                    token: localStorage.getItem('logintoken')
                },
                options: [{
                    value: '',
                    label: ''
                }],
                multipleSelection: [],
                updateTagsVisible: false,
            }
        },

        // 注册组件
        components: {
            Pagination,
            ManageDetail,
            clientList,
            GroupEvent,
            AddTag,
            UpdateClientsTags,
        },
        mounted() {
            this.queryDataHandle(1, 10)
        },

        methods: {
            queryDataHandle(page = 1, rows = 10) {
                let that = this
                let patData ={
                    status: '1',
                    pageSize:rows,
                    pageNum : page
                }
                this.$request("/api/custGroup/selectAll/1_0", patData, "POST").then((data) => {
                    that.listData = data.rows
                    that.pageparm = {
                        currentPage: 1,
                        pageSize: 10,
                        total: data.total
                    }
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },
            searchDataHandle(page = 1, rows=10) {
                let that = this
                let groupData = {
                    clientGroupName: this.groupName,
                    empName: this.lordName,
                    startTime: this.searchTime[0],
                    endTime: this.searchTime[1],
                    status: '1',
                    pageSize:rows,
                    pageNum : page
                }
                this.$request("/api/custGroup/selectAll/1_0", groupData, "POST").then((data) => {
                    that.listData = data.rows
                    that.pageparm = {
                        currentPage: 1,
                        pageSize: 10,
                        total: data.total
                    }
                })
            },
            // 重置
            reset() {
                this.groupName = ''
                this.lordName = ''
                this.searchTime = ''
            },
            // // 分页插件事件
            callFather() {
                this.formInline.page = this.pageparm.currentPage
                this.formInline.limit = this.pageparm.pageSize
                this.getdata(this.formInline)
            },
            // 详情页  ,params:{groupId:123456789}
            currentHandler(current, row) {
                this.data = row
                this.currentPanel = current
            },
            createHandler(current) {
                this.currentPanel = current
            },
            // 显示批量打标签
            showTag() {
                this.tagFormVisible = true;
            },
            // 关闭批量打标签弹出框
            tagClose() {
                this.tagFormVisible = false
            },
            // 显示批量打标签
            showEvent() {
                this.eventFormVisible = true;
            },
            // 关闭事件弹出框
            eventClose() {
                this.eventFormVisible = false
            },
            tableRowChange(val) {
                if (val.length > 0) {
                    this.titleCurrentPanel = true
                } else {
                    this.titleCurrentPanel = false
                }
                this.multipleSelection = val;
            },
            checkOut() {

            },
            selectTag() {
                let that = this
                this.$request("/api/tags/getGroupTagsByParams/1_0?data=null", "", "POST").then((data) => {
                    that.tagsData = date.tagsData
                })

            },

            formatter(row, column) {
                let field = column.property;
                let value = row[field];
                return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
            },
            addTag() {

            },
            showInput() {

            },
            addTagGroup() {

            },
            closePage() {
                this.updateTagsVisible = false
            },
            updateClientTags() {
                let newTag = this.$refs.setClientsTags.getData()
                let newUnionTag = []

                newTag.map((item) => {
                    newUnionTag.push(item.tagId)
                })

                let clients = []

                this.multipleSelection.map((item) => {
                    let that = this
                    this.$request("/api/custGroup/selectClientList/1_0?clientGroupId=" + item.clientGroupId, "", "POST").then((data) => {
                        clients = data.rows
                        clients.map((item) => {
                            if (item.unionTag == null) {
                                item['unionTag'] = newTag
                            } else {
                                let newUnionTag = JSON.parse(item['unionTag']).concat(newTag);
                                item['unionTag'] = newUnionTag
                            }
                            delete item['tagList']
                            item['unionTag'] = JSON.stringify(item['unionTag'])


                            item['newUnionTag'] = JSON.stringify(newUnionTag)
                        })
                    }).then(() => {
                        let payload = {
                            clientList: clients
                        }

                        that.$request("/api/tags/setCustomersTags/1_0", payload, "POST").then((data) => {
                            this.$message.success("批量设置标签成功")
                        })
                    })
                })
                this.updateTagsVisible = false
                this.queryDataHandle(1, 10)
            },
        },
    }
</script>

<style scoped>
    .dialog-footer-up {
        text-align: left;
        float: left;
    }
</style>
